
import React from 'react'

class MenuSettingTextEditor extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    // $(this.refs.PropertyStartTime).datetimepicker({
    //   format: 'HH:mm',
    //   inline: true
    // });
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  componentDidUpdate() {
    if (!this.state.data) {
      var content = "";
      if (this.props.property) {
        var start = new Date(this.props.property.start_time),
            end = new Date(this.props.property.end_time),
            telephone = this.props.property.telephone;
        var start_time = "",
            end_time = "";
        if (start != 'Invalid Date') {
          start_time = this.pad(start.getHours(), 2)+":"+this.pad(start.getMinutes(), 2);
        }
        if (end != 'Invalid Date') {
          end_time = this.pad(end.getHours(), 2) + ":" + this.pad(end.getMinutes(), 2);
        }
        content = "物业联系电话: "+telephone;
        if (start_time.length > 0 && end_time.length > 0) {
          content += ", 工作时间: "+start_time+"~"+end_time;
        }
      }
      this.setState({
        data: {
          content: {
            text: content
          }
        }
      })
    }
  }

  onDataSubmit() {
    if (!this.state.data.id) {
      var data = this.state.data;
      data.msgType = 'event';
      data.event = 'click';
      data.eventKey = (new Date()).getTime()+"";
      data.responseType = 'text'
    }
    this.props.onDataSubmit(this.state.data)
    this.setState({
      data: {}
    })
  }

  onTextEditorClose() {
    this.setState({
      data: {}
    })
  }

  onChange(event, key) {
    var data = this.state.data;
    if (data && data.content) {
      data.content.text = $(event.target).val();
    }else {
      if (!data) {
        data = {};
      }
      data.content = {
        text: $(event.target).val()
      }
    }

    this.setState({
      data: data
    })
  }

  pad(text, length) {
    if ((text+"").length == length) {
      return text
    }
    return this.pad("0"+text, length);
  }

  render() {
    var self = this;


    return (
      <div className="modal fade" id="PropertySettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"
              onClick={(event)=> this.onTextEditorClose()}><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Property-modal-label">发送文字</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <textarea ref="MessageKeyWord" className="form-control textarea_input"
                           id="area" rows="10" onChange={(event)=>this.onChange(event)}
                           value = {(self.state.data&&self.state.data.content)?self.state.data.content.text:""}></textarea>
                {
                  // <input ref="PropertyName" type="text" className="form-control"
                  //         id="Property-name" placeholder="回复" value={(self.state.data&&self.state.data.content)?self.state.data.content.text:""}
                  //         onChange={(event)=>this.onChange(event, "text")}/>
                }
              </div>
              <input ref="PropertyId" value={self.state.data?self.state.data.id:""} hidden/>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal"
                      onClick={(event)=> this.onTextEditorClose()}>取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default MenuSettingTextEditor
